<template>
	<view class="index-page box relative bg-primary" scroll-y="true" :style="statusBarHeightStyle">
		<view class="header-wrap">
			<image class="header-img"
				src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/202508032313595dc6c6049.png"
				mode="aspectFill"></image>
			<view class="custom-navbar">
				<text class="header-title">首页</text>
			</view>
			<view class="user-info">
				<view class="user-avatar">
					<image mode="aspectFill" :src="userInfo.logo"></image>
				</view>
				<view class="user-details">
					<view class="detail-top">
						<text class="user-name">{{ userInfo.nickname || ""}}</text>
						<text class="user-tag">{{ userInfo.level || "" }}</text>
					</view>
					<view class="app-tag">
						<text>{{ userInfo.system_name || "" }}</text>
					</view>
				</view>
				<view class="header-btn-item active" @click="handleToUrl('/pages/index/notice/index')">
					<image class="btn-icon"
						src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/20250803233846ec9985748.png"
						mode="aspectFill" />
					<text class="btn-text">公告</text>
				</view>
				<view class="header-btn-item" @click="handleToUrl('/pages/index/task/index')">
					<image class="btn-icon"
						src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/20250803233823a646b7849.png"
						mode="aspectFill" />
					<text class="btn-text">任务</text>
				</view>
			</view>
			<view class="header-data-list">
				<view class="data-item">
					<text class="data-value">{{ userInfo.tihuo_num || 0 }}</text>
					<text class="data-label">剩余提货量</text>
				</view>
				<view class="data-item-line"></view>
				<view class="data-item">
					<text class="data-value">{{ userInfo.fuwu_num || 0 }}</text>
					<text class="data-label">服务数量</text>
				</view>
				<view class="data-item-line"></view>
				<view class="data-item">
					<text class="data-value">{{ userInfo.yestday_zhishui_rongliang || 0 }}</text>
					<text class="data-label">昨日制水量</text>
				</view>
				<view class="data-item-line"></view>
				<view class="data-item">
					<text class="data-value">{{ userInfo.weijihuo_num || 0 }}</text>
					<text class="data-label">未激活数量</text>
				</view>
			</view>
			<view class="box-inner">
				<image src="/static/icon/shui_icon.png" mode="aspectFill" class="shui-icon"></image>
				<view class="warter-info">
					<view class="warter-text">水质查询</view>
					<view class="warter-desc">水质看得见，喝的更放心</view>
				</view>
				<image @click="handleToUrl('/pages/warter-search/index')" src="/static/icon/shui_right.png"
					mode="aspectFill" class="shui-right-icon"></image>
			</view>
		</view>
		<view class="top-menu-list">
			<view class="menu-item" @click="handleToUrl('/pages/index/my-team/index')">
				<image class="menu-icon" src="/static/icon/m_1.png" mode="aspectFill" />
				<text class="menu-title">我的团队</text>
			</view>
			<view class="menu-item" @click="handleToUrl('/pages/index/customer-record/index')">
				<image class="menu-icon" src="/static/icon/m_2.png" mode="aspectFill" />
				<text class="menu-title">客户档案</text>
			</view>
			<view class="menu-item" @click="handleToUrl('/pages/index/operation-table/index')">
				<image class="menu-icon" src="/static/icon/m_3.png" mode="aspectFill" />
				<text class="menu-title">运营报表</text>
			</view>
			<view class="menu-item" @click="handleToUrl('/pages/index/order-manage/index')">
				<image class="menu-icon" src="/static/icon/m_4.png" mode="aspectFill" />
				<text class="menu-title">订单管理</text>
			</view>
			<view class="menu-item" @click="handleToUrl('/pages/index/take-order/invite?is_shiyong=1')">
				<image class="menu-icon" src="/static/icon/m_5.png" mode="aspectFill" />
				<text class="menu-title">试用开单</text>
			</view>
		</view>
		<view class="center-menu-box">
			<!-- <view class="menu-box-top"></view> -->
			<view class="menu-box-list">
				<view class="box-line-item">
					<view class="box-item" @click="handleToUrl('/pages/index/join-investment/index')">
						<image class="box-item-icon" src="/static/icon/c_m_1.png" mode="aspectFill" />
						<text class="box-item-title">招商加盟</text>
					</view>
					<view class="box-item" @click="handleToUrl('/pages/index/join-investment/stock-up')">
						<image class="box-item-icon" src="/static/icon/c_m_2.png" mode="aspectFill" />
						<text class="box-item-title">库存备货</text>
					</view>
				</view>
				<view class="box-line-item">
					<view class="box-item" @click="handleToUrl('/pages/index/take-order/index')">
						<image class="box-item-icon" src="/static/icon/c_m_3.png" mode="aspectFill" />
						<text class="box-item-title">提货开单</text>
					</view>
					<view class="box-item" @click="handleShowToast">
						<image class="box-item-icon" src="/static/icon/c_m_4.png" mode="aspectFill" />
						<text class="box-item-title">服务商申请</text>
					</view>
				</view>

			</view>
		</view>
		<view class="bottom-menu-box">
			<view class="b-menu-line">
				<view class="b-menu-item" @click="handleToUrl('/pages/index/earnings-record/index')">
					<text class="b-m-title">我的收益</text>
					<image src="/static/icon/b_m_1.png" mode="aspectFill" class="b-m-icon" />
				</view>
				<view class="b-menu-item" @click="handleToUrl('/pages/index/take-money/index')">
					<text class="b-m-title">提现记录</text>
					<image src="/static/icon/b_m_2.png" mode="aspectFill" class="b-m-icon" />
				</view>
			</view>
			<view class="b-menu-line active">
				<!-- <view class="b-menu-item">
					<text class="b-m-title">抵扣记录</text>
					<image src="/static/icon/b_m_3.png" mode="aspectFill" class="b-m-icon" />
				</view> -->
				<view class="b-menu-item">
					<text class="b-m-title">团队业绩</text>
					<image src="/static/icon/b_m_4.png" mode="aspectFill" class="b-m-icon" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixin from "@/mixins/mixin.js"
  import {request, showLoading, formatDate, toast} from "@/utils/tool.js"
	export default {
		mixins: [mixin],
		data() {
			return {
				logo: "",
				userInfo: {
					level: "",
					logo: "",
					nickname: "",
					system_name: "",
					tihuo_num: 0,
					weijihuo_num: 0,
					yestday_zhishui_rongliang: 0
				}
			}
		},
		onShow() {
			this.initData()
		},
		methods: {
			async initData() {
				const resp = await request({
					url: '/index/guanjiaindex',
					method: "GET"
				})
				this.userInfo = resp.data || {}
				console.log(resp, 'resp');
			},
      handleShowToast(){
        toast({title:'此功能后续陆续开通'})
      },
			handleToUrl(url) {
				uni.navigateTo({
					url
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		height: unset;
	}

	.index-page {
		box-sizing: border-box;
		background-color: #F7F8FA;

		.bottom-menu-box {
			margin: 22rpx 32rpx 0;
			box-sizing: border-box;
			position: relative;

			.b-menu-line {
				display: flex;
				align-items: center;

				&.active {
					width: 51%;
				}

				&:first-child {
					margin-bottom: 24rpx;
				}

				.b-menu-item {
					flex: 1;
					padding: 32rpx 0 24rpx 38rpx;
					display: flex;
					align-items: center;
					background: #fff;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);

					&:first-child {
						margin-right: 22rpx;
					}

					.b-m-title {
						font-weight: bold;
						font-size: 32rpx;
						color: #2A3E68;
					}

					.b-m-icon {
						width: 72rpx;
						height: 72rpx;
						margin-left: 50rpx;
					}
				}
			}
		}

		.center-menu-box {
			margin: 28rpx 32rpx 0;
			position: relative;
			box-sizing: border-box;

			.menu-box-list {
				background: #EDEFF1;
				border-radius: 0rpx 0rpx 20rpx 20rpx;
				padding: 30rpx 32rpx;
				box-sizing: border-box;

				.box-line-item {
					display: flex;
					align-items: center;

					&:first-child {
						margin-bottom: 20rpx;
					}

					.box-item {
						flex: 1;
						background: #fff;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						padding: 22rpx 0 22rpx 26rpx;
						display: flex;
						align-items: center;

						&:first-child {
							margin-right: 26rpx;
						}


						.box-item-icon {
							width: 56rpx;
							height: 56rpx;
						}

						.box-item-title {
							margin-left: 36rpx;
							font-weight: bold;
							font-size: 28rpx;
							color: #2A3E68;
						}
					}
				}


			}

		}

		.top-menu-list {
			display: flex;
			align-items: center;
			flex-flow: row nowrap;
			padding: 0 38rpx;
			box-sizing: border-box;
			position: relative;
			margin-top: 90rpx;
			justify-content: space-between;

			.menu-item {
				display: flex;
				flex-flow: column;
				align-items: center;

				.menu-icon {
					width: 90rpx;
					height: 90rpx;
				}

				.menu-title {
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
					margin-top: 16rpx;
				}
			}
		}

		.header-wrap {
			width: 100%;
			box-sizing: border-box;
			position: relative;
			height: 506rpx;
			padding-top: var(--status-height-value);

			.box-inner {
				background: #fff;
				padding: 18rpx 24rpx;
				display: flex;
				align-items: center;
				border-radius: 12rpx;
				position: relative;
				margin: 26rpx 32rpx 0;

				.shui-right-icon {
					width: 68rpx;
					height: 68rpx;
					margin-left: auto;
				}

				.shui-icon {
					width: 68rpx;
					height: 68rpx;
				}

				.warter-info {
					margin-left: 20rpx;

					.warter-text {
						font-size: 26rpx;
						color: #000000;
						line-height: 44rpx;
					}

					.warter-desc {
						font-size: 20rpx;
						color: #B5BBCA;
						line-height: 40rpx;
					}
				}
			}

			.header-data-list {
				margin-top: 32rpx;
				padding: 0 40rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				position: relative;

				.data-item-line {
					width: 2rpx;
					height: 86rpx;
					background: #fff;
					margin: 0 10rpx;
				}

				.data-item {
					flex: 1;
					display: flex;
					flex-flow: column;
					align-items: center;

					.data-label {
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-top: 10rpx;
					}

					.data-value {
						font-weight: bold;
						font-size: 30rpx;
						color: #FFFFFF;
						line-height: 44rpx;
					}
				}
			}

			.user-info {
				margin-top: 12rpx;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				width: 100%;
				box-sizing: border-box;
				position: relative;

				.header-btn-item {
					display: flex;
					flex-flow: column;
					align-items: center;

					&.active {
						margin-right: 18rpx;
					}

					.btn-icon {
						width: 68rpx;
						height: 68rpx;
					}

					.btn-text {
						margin-top: 2rpx;
						font-size: 22rpx;
						line-height: 30rpx;
						color: #FFFFFF;
						letter-spacing: 1px;
					}
				}

				.user-details {
					flex: 1;
					margin-left: 22rpx;
					color: #fff;

					.app-tag {
						margin-top: 18rpx;
						padding: 6rpx 10rpx;
						box-sizing: border-box;
						position: relative;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						background: #fff;
						font-weight: 400;
						font-size: 22rpx;
						color: #0565FF;
						letter-spacing: 1px;
						line-height: 30rpx;
						width: fit-content;
					}

					.detail-top {
						display: flex;
						align-items: center;

						.user-name {
							font-size: 32rpx;
							color: #FFFFFF;
							letter-spacing: 1px;
							line-height: 44rpx;
						}

						.user-tag {
							width: fit-content;
							margin-left: 8rpx;
							padding: 6rpx 10rpx;
							box-sizing: border-box;
							position: relative;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							background: #fff;
							font-weight: 400;
							font-size: 22rpx;
							color: #0565FF;
							letter-spacing: 1px;
							line-height: 30rpx;
						}
					}
				}

				.user-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					background: #fff;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.custom-navbar {
				display: flex;
				align-items: center;
				height: 88rpx;
				position: relative;
				padding: 0 36rpx;
				box-sizing: border-box;

				.check-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				.device-title {
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.header-title {
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.header-img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}
</style>